
let UIConstants = require('../ui_constants');
let BaseView = require('../BaseView');

let templateBegin = `
            <label>开始位置</label>
            <button class="btn_minus_1">-1</button>
            <button class="btn_minus_10">-10</button>
            <label class="lb_cur">0</label>
            <input class="chain_scope" type="range">
            <button class="btn_add_1">+1</button>
            <button class="btn_add_10">+10</button>
            <select class="bkpType">
                <option value="1">碰撞</option>
                <option value="2">洞</option>
                <option value="3">桥</option>
            </select>
        `;

let templateEnd = `
            <label>结束位置</label>
            <button class="btn_minus_1">-1</button>
            <button class="btn_minus_10">-10</button>
            <label class="lb_cur">0</label>
            <input class="chain_scope" type="range">
            <button class="btn_add_1">+1</button>
            <button class="btn_add_10">+10</button>
            <button class="btn_delete">删除</button>
        `;

let settings = require('../../settings');
class BkpSubItemView extends BaseView{
    constructor(type) {
        super();
        this._checkType(type);
        this._type = type;

        // setup rootEl
        let rootEl = document.createElement('div');
        if(type === UIConstants.BkpSubItemType.Begin){
            rootEl.classList.add('start');
            rootEl.innerHTML = templateBegin;
        }else{
            rootEl.classList.add('end');
            rootEl.innerHTML = templateEnd;
        }
        this.rootEl = rootEl;

        // 事件
        // ui  btns
        let btnM1 = rootEl.querySelector('.btn_minus_1');
        btnM1.addEventListener('click',()=>{
            this.parentView.onUpdateIndex(this._type,-1);
        }, false);

        let btnM10 = rootEl.querySelector('.btn_minus_10');
        btnM10.addEventListener('click',()=>{
            this.parentView.onUpdateIndex(this._type,-10);
        }, false);

        let btnAdd1 = rootEl.querySelector('.btn_add_1');
        btnAdd1.addEventListener('click',()=>{
            this.parentView.onUpdateIndex(this._type,1);
        }, false);

        let btnAdd10 = rootEl.querySelector('.btn_add_10');
        btnAdd10.addEventListener('click',()=>{
            this.parentView.onUpdateIndex(this._type,10);
        }, false);

        // label
        let lbCur = rootEl.querySelector('.lb_cur');
        this._lbCurEl = lbCur;

        // delete
        let btnDelete = rootEl.querySelector('.btn_delete');
        if (btnDelete) {
            btnDelete.addEventListener('click',()=>{
                if(settings.showConfirmDialog('确定要删除么?')){
                    this.parentView.onDeleteItem();
                }
            }, false);
        }

        // select
        let bkpTypeEl = rootEl.querySelector('.bkpType');
        if (bkpTypeEl) {
            bkpTypeEl.addEventListener('change',()=>{
                let newBkpType = Number(bkpTypeEl.value);
                this.parentView.onChangeBkpType(newBkpType);
            }, false);
            this.bkpTypeEl = bkpTypeEl;
        }


        // input
        this.inputEl = rootEl.querySelector('.chain_scope');
        this.inputEl.addEventListener('change',()=>{
            let newIdx = Number(this.inputEl.value);
            this.parentView.onChangeIdx(this._type,newIdx);
        },false);
    }

    get type(){
        return this._type;
    }


    _checkType(type){
        if(type === UIConstants.BkpSubItemType.Begin ||
           type === UIConstants.BkpSubItemType.End){
            return;
        }
        throw new Error(`error type:${type}`);
    }

    setRange(min,max){
        this.inputEl.setAttribute('min',min);
        this.inputEl.setAttribute('max',max);
    }

    setCurIdx(idx){
        this.inputEl.value = idx;
    }

    setBkpType(bkpType){
        if(this.bkpTypeEl){
            this.bkpTypeEl.value = bkpType;
        }
    }
}
module.exports = BkpSubItemView;
